<script setup>
import {Delete, Edit, Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
const dialogVisible=ref(false)
const form=ref({});
const dialogTitle=ref("")
const text=ref("");
const courses=ref([])
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0)
onMounted(()=>{
  getData();
})
const getData=()=>{
  axios.get("http://localhost:8080/course/findByPage",{
    params:{
      pageNum:currentPage.value,
      pageSize:pageSize.value
    }
  }).then(res=>{
    courses.value=res.data.records;
    total.value=res.data.total;
  }).catch(err=>{
    console.log(err)
  })
}
//切换每页显示条数
const handleSizeChange=(pagesize)=>{
  pageSize.value=pagesize
  getData();
}
//切换当前页码
const handleCurrentChange=(pageNum)=>{
  currentPage.value=pageNum
  getData();
}
//多选事件
let multipleSelection = ref([]);
const handleSelectChange = (val) => {
  multipleSelection.value=[]
  val.forEach(item=>{
    multipleSelection.value.push(item.cno)
  })
}
// 排序事件
const handleSortChange = (sortData) => {
  const {prop, order} = sortData;
  courses.value=courses.value.sort((a, b) => {
    if (order === 'ascending') {
      return a[prop] > b[prop] ? 1 : -1;
    } else {
      return a[prop] < b[prop] ? 1 : -1;
    }
  });
}
const visible=ref()
//显示全部列表
const showAllList=()=>{
  visible.value=0;
  getData();
}
//显示开放列表
const showOpenList=()=>{
  visible.value=2;
  axios.get("http://localhost:8080/course/findOpenByPage",{
    params:{
      pageNum:currentPage.value,
      pageSize:pageSize.value
    }
  }).then(res=>{
    courses.value=res.data.records;
    total.value=res.data.total;
  }).catch(err=>{
    console.log(err)
  })
}
//显示关闭列表
const showCloseList=()=>{
  visible.value=1;
  axios.get("http://localhost:8080/course/findCloseByPage",{
    params:{
      pageNum:currentPage.value,
      pageSize:pageSize.value
    }
  }).then(res=>{
    courses.value=res.data.records;
    total.value=res.data.total;
  }).catch(err=>{
    console.log(err)
  })
}
const israte=ref()
//开放评教事件
const handleOpenList=()=>{
  const cnos=multipleSelection.value
  israte.value=1;
  axios.put(`http://localhost:8080/courses/${israte.value}`,cnos).then(res=>{
    showCloseList();
    ElMessage({
      showClose: true,
      message: '开放成功',
      type: 'success'
    })
  }).catch(err=>{
    console.log(err)
  })
}
//关闭评教事件
const handleCloseList=()=>{
  const cnos=multipleSelection.value
  israte.value=0;
  axios.put(`http://localhost:8080/courses/${israte.value}`,cnos).then(res=>{
    showOpenList();
    ElMessage({
      showClose: true,
      message: '关闭成功',
      type: 'success'
    })
  }).catch(err=>{
    console.log(err)
  })
}
const buttonVisible=ref();
function showRateForm() {
  dialogTitle.value="发布评教"
  buttonVisible.value=true;
  dialogVisible.value=true;
}

const dialogOk=()=>{
  dialogVisible.value = false;
  ElMessage({
    showClose: true,
    message: '发布成功',
    type: 'success'
  })
}

</script>

<template>
  <div>
    <div>
      <div>
        <el-button type="primary" @click="showRateForm">发布评教</el-button>
      </div>
    </div>
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
      <div style="display: flex; justify-content: space-between;margin-bottom: 10px">
        <el-button type="primary" :icon="Search" @click="showAllList">全部</el-button>
        <el-button type="primary" :icon="Search" @click="showOpenList">已开放</el-button>
        <el-button type="primary" :icon="Search" @click="showCloseList">已关闭</el-button>
        <el-button type="primary" :icon="Edit" @click="handleOpenList" v-if="visible===1">开放</el-button>
        <el-button type="danger" :icon="Edit" @click="handleCloseList" v-if="visible===2">关闭</el-button>
      </div>
      <div>
        <el-table class="popTable" :data="courses"
                  @selection-change="handleSelectChange"
                  @sort-change="handleSortChange"
                  :header-cell-style="{ background: '#f6f9fa'}">
          <el-table-column type="selection"/>
          <el-table-column prop="cno" label="课程号" sortable></el-table-column>
          <el-table-column prop="tno" label="教师号"></el-table-column>
          <el-table-column prop="israte" label="是否开放"></el-table-column>
        </el-table>
        <el-pagination
            background
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5,10,20]"
            :total="total"
            layout="prev, pager, next, sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="justify-content: center;margin-top: 8px"
        />
      </div>
      <el-form :model="form">
        <div>1-已开放，0-已关闭</div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogOk">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>